<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Sequencer test</title>
		<style type="text/css">
			body   { margin:1em; padding:0; }
			canvas {
				background-color: rgb(0,0,0);
				display : block;
			}
		</style>
	</head>
	<body>
		<canvas width="300" height="200"></canvas>hiDPI : false<br>
		<br>
		<canvas width="300" height="200"></canvas>hiDPI : true<br>
	</body>
	<script type="module">

		import Sequencer from '../sequencer/sequencer.js';

		// test to check if aspect and size is the same with hiDPI enabled / disabled

		for (let i=0; i<2; i++){
			const s = Sequencer.make({
				canvas           : document.querySelectorAll("canvas")[i],
				from             : 'pics/pig/DSC04701.JPG',
				to               : 'pics/pig/DSC04775.JPG',
				direction        : "-x",
				playMode         : "hover",
				scaleMode        : "auto",
				showLoadedImages : false,
				fitFirstImage    : false,
				hiDPI            : i % 2,
				imageLoad        : function(e){
					//console.log("[id: " + e.id + "] " + e.count + "/" + e.total);
				},
				queueComplete    : function(e){
					//console.log(e);
				}
			});
		}

	</script>
</html>